<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉窗口的打开与自动隐藏</title>
<link rel="stylesheet" type="text/css" href="css/0905.css"/>
</head>

<body>

<div class="marketMenu">
  <div class="curAdress" id="curAdress">
  <p class="pCur fl">当前：<span class="sAdr"><a href="">广州</a></span> </p>
  <div class="pcPopCont"><span class="pcPopCity" id="navbtnOpenCities" onClick="document.getElementById('navcitiesList').className='pcPop pcPopHover'">切换<em class="arrow"></em></span> 
    <div class="pcPop" id="navcitiesList" onMouseOver="document.getElementById('navcitiesList').className='pcPop pcPopHover'">
      <div class="box" id="jNavcityiesListBox">
        <div class="hd" id="navbtnCloseCities" onClick="document.getElementById('navcitiesList').className='pcPop'"><i>切换</i><em class="arrow"></em></div>
        <div class="bd" id="navdropContent">
          <ul>
            <li class="liRemen"><i class="iLft">热门城市：</i> 
              <i class="iCity"><a href="" target="_blank">东莞</a> 
              <a href="" target="_blank">厦门</a> 
              <a href="" target="_blank">佛山</a> 
              <a href="" target="_blank">珠海</a> 
              <a href="" target="_blank">香港</a> </i>
            </li>
            <li class="liQG"><i class="iPrv">全　国</i><i class="iCity"> 
            <a href="" target="_blank">全国</a></i> </li>
            <li><em>A</em><i class="iPrv">安徽省</i>
              <i class="iCity">
              <a href="" target="_blank">合肥</a> 
              <a href="" target="_blank">芜湖</a></i> 
            </li>
            <li><em>B</em><i class="iPrv">北京市</i> 
              <i class="iCity"><a href="" target="_blank">北京</a></i>
            </li>
            <li><em>C</em><i class="iPrv">重庆市</i> 
              <i class="iCity"><a href="" target="_blank">重庆</a></i>
            </li>
            <li><em>F</em><i class="iPrv">福建省</i> <i class="iCity"><a href="http://fj.pconline.com.cn/" target="_blank">福州</a> <a href="http://xm.pconline.com.cn/" target="_blank">厦门</a> </i></li>
            <li><em>G</em><i class="iPrv">广东省</i> <i class="iCity"><a href="http://gz.pconline.com.cn/" target="_blank">广州</a> <a href="http://sz.pconline.com.cn/" target="_blank">深圳</a> <a href="http://dg.pconline.com.cn/" target="_blank">东莞</a> <a href="http://fs.pconline.com.cn/" target="_blank">佛山</a> <a href="http://zh.pconline.com.cn/" target="_blank">珠海</a> </i></li>
            <li><i class="iPrv">广西省</i> <i class="iCity"><a href="http://gx.pconline.com.cn/" target="_blank">南宁</a> </i></li>
            <li><i class="iPrv">甘肃省</i> <i class="iCity"><a href="http://lz.pconline.com.cn/" target="_blank">兰州</a> </i></li>
            <li><i class="iPrv">港　澳</i> <i class="iCity"><a href="http://hk.pconline.com.cn/" target="_blank">香港</a> </i></li>
            <li><em>H</em><i class="iPrv">湖南省</i> <i class="iCity"><a href="http://hn.pconline.com.cn/" target="_blank">长沙</a> </i></li>
            <li><i class="iPrv">湖北省</i> <i class="iCity"><a href="http://wh.pconline.com.cn/" target="_blank">武汉</a> </i></li>
            <li><i class="iPrv">海南省</i> <i class="iCity"><a href="http://hainan.pconline.com.cn/" target="_blank">海口</a> </i></li>
            <li><i class="iPrv">河南省</i> <i class="iCity"><a href="http://henan.pconline.com.cn/" target="_blank">郑州</a> </i></li>
            <li><i class="iPrv">河北省</i> <i class="iCity"><a href="http://hb.pconline.com.cn/" target="_blank">石家庄</a> <a href="http://bd.pconline.com.cn/" target="_blank">保定</a> </i></li>
            <li><i class="iPrv">黑龙江</i> <i class="iCity"><a href="http://hl.pconline.com.cn/" target="_blank">哈尔滨</a> <a href="http://dq.pconline.com.cn/" target="_blank">大庆</a> </i></li>
            <li><em>J</em><i class="iPrv">江西省</i> <i class="iCity"><a href="http://jx.pconline.com.cn/" target="_blank">南昌</a> </i></li>
            <li><i class="iPrv">江苏省</i> <i class="iCity"><a href="http://jiangsu.pconline.com.cn/" target="_blank">南京</a> <a href="http://suzhou.pconline.com.cn/" target="_blank">苏州</a> <a href="http://wx.pconline.com.cn/" target="_blank">无锡</a> </i></li>
            <li><i class="iPrv">吉林省</i> <i class="iCity"><a href="http://cc.pconline.com.cn/" target="_blank">长春</a> </i></li>
            <li><em>L</em><i class="iPrv">辽宁省</i> <i class="iCity"><a href="http://ln.pconline.com.cn/" target="_blank">沈阳</a> <a href="http://dalian.pconline.com.cn/" target="_blank">大连</a> </i></li>
            <li><em>N</em><i class="iPrv">内蒙古</i> <i class="iCity"><a href="http://nm.pconline.com.cn/" target="_blank">呼和浩特</a> </i></li>
            <li><em>S</em><i class="iPrv">上海市</i> <i class="iCity"><a href="http://shanghai.pconline.com.cn/" target="_blank">上海</a> </i></li>
            <li><i class="iPrv">四川省</i> <i class="iCity"><a href="http://cd.pconline.com.cn/" target="_blank">成都</a> </i></li>
            <li><i class="iPrv">陕西省</i> <i class="iCity"><a href="http://xa.pconline.com.cn/" target="_blank">西安</a> </i></li>
            <li><i class="iPrv">山东省</i> <i class="iCity"><a href="http://sd.pconline.com.cn/" target="_blank">济南</a> <a href="http://qd.pconline.com.cn/" target="_blank">青岛</a> 
            </i></li>
            <li><i class="iPrv">山西省</i> <i class="iCity"><a href="http://ty.pconline.com.cn/" target="_blank">太原</a> </i></li>
            <li><em>T</em><i class="iPrv">天津市</i> <i class="iCity"><a href="http://tj.pconline.com.cn/" target="_blank">天津</a> </i></li>
            <li><em>Y</em><i class="iPrv">云南省</i> <i class="iCity"><a href="http://km.pconline.com.cn/" target="_blank">昆明</a> </i></li>
            <li><em>Z</em><i class="iPrv">浙江省</i> <i class="iCity"><a href="http://zj.pconline.com.cn/" target="_blank">杭州</a> <a href="http://nb.pconline.com.cn/" target="_blank">宁波</a> 
          </i></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>
<script>
function isContain(a, b) {
  try {
	return a.contains ? a != b && a.contains(b) : !(a.compareDocumentPosition(b) & 16);
  }catch (e) {}
}

function bindMouseLeave(obj, fn) {
  if (obj.attachEvent) {
	obj.attachEvent('onmouseleave', function(){
	  fn.call(obj, window.event);
	});} 
  else {
	obj.addEventListener('mouseout', function(e) {
	  var rt = e.relatedTarget;
	  if (rt !== obj && !isContain(obj, rt)) {
		  fn.call(obj, e); }
	  }, false);
  }
}

(function(){
  var cityList = document.getElementById('navcitiesList');
  bindMouseLeave(cityList, function(){
	cityList.className='pcPop'
  });
})();
</script>

</body>
</html>
